<style>
#sideContainer {
    list-style-type: none;
    padding: 0;
    margin: 0 10px 0 0;
    float: left;
    border: 1px solid #676767;
    background-color: #eee;
    overflow: auto;
  }
  #sideContainer li {
    font-size: 0.9em;
    border-bottom: 1px solid #aaa;
    padding: 5px;
  }
  #mapContainer {
    float: left;
    width: 500px;
    height: 400px;
  }
 </style>
<script>
// global marker counter
var n = 1;
var directionsService = new google.maps.DirectionsService();




function generateListElement( marker,marker2 ){
    var ul = document.getElementById('sideContainer');
    var li = document.createElement('li');
    var aSel = document.createElement('a');
    aSel.href = 'javascript:void(0);';
    aSel.innerHTML = 'Hospital #' + n++;
    aSel.onclick = function(){ google.maps.event.trigger(marker, 'click')};
    li.appendChild(aSel);
    ul.appendChild(li);
    
    var request = {
  origin:marker2,
  destination:marker,
  travelMode: google.maps.DirectionsTravelMode.DRIVING
};



directionsService.route(request, function(result, status) {
  if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setMap(map);
    var mystr="";
    for(var i in result.routes){
      var mylegs=result.routes[i].legs
      for(var j in mylegs){
        mystr += mylegs[j].distance.text;
        mystr += " " + mylegs[j].duration.text+ " <br/>";
      }
      mystr+="<br/>";
      $("#infoRecorrido").html(mystr);
    }
    directionsDisplay.setDirections(result);
  }
});


    
}
</script>


<?php
$this->breadcrumbs=array(
	'Incidentes'=>array('index'),
	$model->id,
);

$this->menu=array(
	array('label'=>'Listar Incidente', 'url'=>array('index')),
	array('label'=>'Registrar Incidente', 'url'=>array('create')),
	array('label'=>'Actualizar Incidente', 'url'=>array('update', 'id'=>$model->id)),
	array('label'=>'Eliminar Incidente', 'url'=>'#', 'linkOptions'=>array('submit'=>array('delete','id'=>$model->id),'confirm'=>'Estas seguro?')),
	array('label'=>'Buscar Incidente', 'url'=>array('admin')),
);
?>

<h1>Ver Incidente #<?php echo $model->id; ?></h1>



<?php 

  
        $this->widget('zii.widgets.CDetailView', array(
	'data'=>$model,
	'attributes'=>array(
		'id',
//		'tipo',
                'estado',
		'direccion',
//		'x',
//		'y',
            'descripcion',
            'fecha'
	),
)); 
        
      
        ?>


<div class="view">
<ul id="sideContainer" style></ul>
    <?php
     
Yii::import('ext.gmaps.*');
$gmap = new EGMap();
 
$gmap->setWidth(600);

$gmap->setHeight(400);
$gmap->zoom = 14; 

$gmap->setCenter(-12.07483088767733, -77.05372421813968);


$icon = new EGMapMarkerImage("http://jqnf.net/jqnf/wp-content/plugins/mappress-google-maps-for-wordpress/icons/car.png");
 
$icon->setSize(32, 37);
$icon->setAnchor(16, 16.5);
$icon->setOrigin(0, 0);
 
$marker = new EGMapMarkerWithLabel($model->x,  $model->y, array('title' => 'Accidente','icon'=>$icon));
$gmap->setCenter($marker->getLat(), $marker->getLng());


$gmap->addMarker($marker);



// $marker=new EGmap3Marker(array(
//            'title'=>$model->direccion,
//            'draggable'=>false,
//            'icon'=>"http://jqnf.net/jqnf/wp-content/plugins/mappress-google-maps-for-wordpress/icons/car.png")
//         );
         
     
    //for capturing teh coordinates


//$js = "function(marker, event, data){
//        var map = $(this).gmap3('get'),
//        infowindow = $(this).gmap3({action:'get', name:'infowindow'});
//        if (infowindow){
//            infowindow.open(map, marker);
//            infowindow.setContent(data);
//        } else {
//            $(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data}});
//        }
//}";
//
//$js2 = "function(){
//          var infowindow = $(this).gmap3({action:'get', name:'infowindow'});
//          if (infowindow){
//                infowindow.close();
//          }
// }";



          
 // Create custom icon   
//$icon = new EGMapMarkerImage("http://jqnf.net/jqnf/wp-content/plugins/mappress-google-maps-for-wordpress/icons/car.png");
//$icon->setSize(32, 37);
//$icon->setAnchor(16, 16.5);
//$icon->setOrigin(0, 0);   ,'icon'=>$icon



$item = Hospital::model()->findAll();


    $icon2 = new EGMapMarkerImage("http://images1.wikia.nocookie.net/__cb20110226135308/wotld/images/1/13/Hospital_icon.png");
 
$icon2->setSize(32, 37);
$icon2->setAnchor(16, 16.5);
$icon2->setOrigin(0, 0);

for ($i=0;$i<count($item);$i++) {
    
    if ($item[$i]->seguro==0){
        $desc="Sin SOAT";
    }
    else {
        $desc="Con SOAT";
    }
    $marker2 = new EGMapMarkerWithLabel($item[$i]->x,  $item[$i]->y, array('title' => $desc,'icon'=>$icon2));
    $info_window_b = new EGMapInfoWindow($item[$i]->nombre);

$marker2->addHtmlInfoWindow($info_window_b);
    $gmap->addMarker($marker2);
    $markers[] = $marker2;
//    
//    new EGmap3Marker(array(
//            'title'=>$item[$i]->nombre,
//            'draggable'=>false,'icon'=>"http://images1.wikia.nocookie.net/__cb20110226135308/wotld/images/1/13/Hospital_icon.png")
//          
            
            
            
//            );
     

        


}
 
        const TRAVEL_MODE_DRIVING= 'google.maps.DirectionsTravelMode.DRIVING';

$origen=new EGMapCoord($marker->getLat(),$marker->getLng() );
$destino=new EGMapCoord($marker2->getLat(),$marker2->getLng() );
$direction = new EGMapDirection($origen, $destino, 'direction_sample');
$direction->provideRouteAlternatives = true;
$direction->travelMode='google.maps.DirectionsTravelMode.DRIVING';
$renderer = new EGMapDirectionRenderer();
$renderer->draggable =true;
$renderer->panel = "direction_pane";


$renderer->setPolylineOptions(array('strokeColor'=>'#FE2EC8'));

$direction->setRenderer($renderer);
$gmap->addDirection($direction);
$afterInit = array();
foreach($markers as $m){
    $afterInit[] = 'generateListElement('.$m->getJsName().','.$marker->getJsName().');'.PHP_EOL;
}

$gmap->renderMap($afterInit);
  
?>
</div>
<div id="direction_pane"></div>